<template>
  <div class="person">
    <span style="margin-right: 20px">姓名：{{ name }}</span>
    <span style="margin-right: 20px">年龄：{{ age }}</span>
    <span>苹果的价格：{{ fruit }}</span>
    <br />
    <button @click="showTel">展示联系方式：</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<!-- 如果要把setup 写在<script>标签中，需要加上'lang=ts', -->
<!-- <script lang='ts' setup name: 'PersonAll'> -->
 <!-- lang="ts" 是配置组件名字的， setup 是配置组合式API的-->
<script lang="ts">
export default {
  // component name should always be mui-word  名字应该是个多词的
  // 如果不想写这一行,可以安装插件'vite-plugin-vue-setup-extend',这个时候就可以把这一行写在<script lang='ts' setup name: 'PersonAll'>
  name: 'PersonAll',
  // vue2写法
  data() {
    return {
      name: '张三',
      age: 18,
      tel: '1381234567',
      fruit: this.age
    }
    // },
    // methods: {
    //   showTel() {
    //     alert(this.tel)
    //   },
    //   changeName() {
    //     this.name = '小兰'
    //   },
    //   changeAge() {
    //     this.age += 1
    //   }
  },
  setup() {
    // vue3的setup中this指向undefined
    console.log(this, '佳静')
    let name = '小淳'
    let age = 18
    let tel = '123456789'

    // 方法
    function showTel() {
      alert(tel)
    }

    function changeName() {
      name = '佳静'
      console.log('改变名字', name)
    }
    function changeAge() {
      age += 1
      console.log('改变年龄', age)
    }

    // setup的返回值也可以是一个渲染函数，也就是说将一个函数的返回值渲染到页面上
    return { showTel, changeName, changeAge }

    // vue2的data()可以和vue3的setup混用，data()中可以读取setup的值，因为setup是最先加载的，但是要用this. ，反过来，setup中不能读取到data()中定义的值，但是不建议这样混用
  }
}
</script>

<style scoped>
.person {
  width: 360px;
  height: 60px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
